<template>
  <div>
      <div>
          <span>用户名：</span>
          <input type="text" v-model="username">
      </div>
      <div>
          <span>密码：</span>
          <input type="text" v-model="pass">
      </div>
      <div>
          <span>来自于：</span>
          <!-- 下拉菜单要绑定在select上 -->
          <select v-model="from">
              <option value="北京市">北京</option>
              <option value="天津市">天津</option>
              <option value="山西市">山西</option>
          </select>
      </div>
      <div>
          <!-- 遇到复选框时，非数组，关联的是复选框的checkbox属性 ；数组的时候，关联的是value的值-->
          <span>爱好</span>
          <input type="checkbox" v-model="hobby" value="吃火锅">吃火锅
          <input type="checkbox" v-model="hobby" value="玩王者">玩王者
          <input type="checkbox" v-model="hobby" value="写代码">写代码
          <input type="checkbox" v-model="hobby" value="喝奶茶">喝奶茶
      </div>
      <div>
          <span>性别</span>
          <input type="radio" value="男" name="sex" v-model="gender">男
          <input type="radio" value="女" name="sex" v-model="gender">女
      </div>
      <div>
          <span>自我介绍</span>
          <textarea v-model="intro"></textarea>
      </div>
  </div>
</template>

<script>
export default {
    data(){
        return{
            username:'',
            pass:'',
            from:'',
            hobby:[],
            gender:'',
            intro:''
        }
    }
}
</script>

<style>

</style>